<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-06-05 09:59:56
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-06 15:10:05
-->
<template>
  <div class="workbench-wrapper">
    <el-row :gutter="16">
      <el-col :span="18">
        <el-row>
          <div class="todo-wrap" v-loading="loading">
            <img class="person" src="@/assets/images/bg_person.png" alt="" srcset="" />
            <div class="bg">
              <div class="g-flex-start-center">
                <CIcon type="c-mian-daiban" style="color: #eafaf6; font-size: 20px"></CIcon>
                <span class="todo-title">我的待办</span>
              </div>
              <p class="todo-des">当前企业：{{ accountData?.enterpriseName || '-' }}</p>
              <el-row>
                <el-col :span="6">
                  <div class="todo-item" @click="routerTo(TodoTaskStatusEnum.PENDING)">
                    <div class="item-left">
                      <p class="item-title">待处理</p>
                      <p class="item-des">{{ todoInfo?.ruTaskNum || 0 }}</p>
                    </div>
                    <div class="item-right"></div>
                    <div class="item-corner">
                      <CIcon type="c-xian-jianyou" class="arrow-icon"></CIcon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="todo-item" @click="routerTo(TodoTaskStatusEnum.ABOUT_TO_EXPIRE)">
                    <div class="item-left">
                      <p class="item-title">即将超时</p>
                      <p class="item-des">{{ todoInfo?.nearDueTaskNum || 0 }}</p>
                    </div>
                    <div class="item-right"></div>
                    <div class="item-corner">
                      <CIcon type="c-xian-jianyou" class="arrow-icon"></CIcon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="todo-item" @click="routerTo(TodoTaskStatusEnum.OUT_OF_TIME)">
                    <div class="item-left">
                      <p class="item-title">已超时</p>
                      <p class="item-des">{{ todoInfo?.dueTaskNum || 0 }}</p>
                    </div>
                    <div class="item-right"></div>
                    <div class="item-corner">
                      <CIcon type="c-xian-jianyou" class="arrow-icon"></CIcon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="handle-item" @click="routerTo(TodoTaskStatusEnum.PROCESSED)">
                    <span class="handle-left">已处理</span>
                    <span class="handle-right">{{ todoInfo?.hiTaskNum || 0 }}</span>
                  </div>
                  <div class="handle-item" @click="routerTo(TodoTaskStatusEnum.SUBMITTED)">
                    <div class="handle-left"
                      >已提交
                      <el-tooltip
                        placement="top"
                        content="已提交类型中，包括我发起的各种状态下的流程"
                      >
                        <CIcon class="g-ml5 des-icon" type="c-xian-shuoming"></CIcon>
                      </el-tooltip>
                    </div>
                    <span class="handle-right">{{ todoInfo?.startProcessNum || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <WorkBox class="g-mt16" icon="c-biao_zhibiaoshuju" name="指标数据">
          <NormBox></NormBox>
        </WorkBox>
        <WorkBox class="g-mt16" icon="c-biao_guanlizhidu" name="管理制度">
          <template #right>
            <div id="simple-page"></div>
          </template>
          <SystemBox></SystemBox>
        </WorkBox>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col :span="24">
            <NoticeBox></NoticeBox>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <WorkBox class="g-mt16" icon="c-biao_xiangguanzhengce" name="相关政策">
              <PolicyBox></PolicyBox>
            </WorkBox>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <SystemFeedback class="g-mt16"></SystemFeedback>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup name="Workbench">
import { ref } from 'vue';

import { getUserAccount } from '@/apis/workbench';
import type { GetUserAccountResult } from '@/apis/workbench/model/workbenchModel';
import { useRouter } from 'vue-router';
import WorkBox from './components/WorkBox/index.vue';
import NormBox from './components/NormBox/index.vue';
import SystemBox from './components/SystemBox/index.vue';
import NoticeBox from './components/NoticeBox/index.vue';
import PolicyBox from './components/PolicyBox/index.vue';
import SystemFeedback from './components/SystemFeedback/index.vue';

import type { GetTodoStatisticsResult } from '@/apis/workbench/model/workbenchModel';
import { getTodoStatistics } from '@/apis/workbench';
import { TodoTaskStatusEnum } from '@/constants/enum';

const router = useRouter();
const accountData = ref<GetUserAccountResult>();
async function getAccountData() {
  const res = await getUserAccount();
  accountData.value = res;
}
const todoInfo = ref<GetTodoStatisticsResult>();
const loading = ref(false);
async function getTodoData() {
  try {
    loading.value = true;
    todoInfo.value = await getTodoStatistics();
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

const loadAllData = () => {
  getAccountData();
  getTodoData();
};
loadAllData();

function routerTo(type: keyof typeof TodoTaskStatusEnum) {
  sessionStorage.setItem('todoListType', type);
  router.push(`/todo-list`);
}
</script>
<style lang="scss" scoped>
.workbench-wrapper {
  padding: 24px 31px 20px;
  width: 100%;
  height: 100%;
  background: url('~@/assets/images/bg_workbench.png') no-repeat right top, #f3f7fb;
  // background: url('~@/assets/images/bg_top.png') no-repeat right top, #f3f7fb;
  background-size: 100%;

  .todo-wrap {
    position: relative;

    .person {
      position: absolute;
      right: 0;
      top: -30px;
      width: 297px;
      height: 288px;
      z-index: 2;
      display: none;
    }

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(2, 137, 104, 0) 0%, #03ac82 100%);
      padding: 24px;
      border-radius: 12px;
      z-index: 3;
    }

    height: 256px;
    width: 100%;
    background: url('~@/assets/images/bg_todo.png') no-repeat;
    background-size: 100% 256px;
    border-radius: 12px;
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      position: absolute;
      top: 16px;
      left: 3px;
      width: 100%;
      height: 100%;
      background: #03ac82;
      border-radius: 12px;
      opacity: 0.2;
      filter: blur(10px);
      z-index: -1;
    }

    .todo-title {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 24px;
      margin-left: 7px;
    }

    .todo-des {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      margin-top: 6px;
      margin-bottom: 42px;
    }

    .todo-item {
      width: 100%;
      height: 114px;
      position: relative;
      display: flex;
      cursor: pointer;

      &:hover {
        .item-left {
          box-shadow: 0px 4px 10px 0px rgba(1, 68, 52, 0.2);
        }

        .arrow-icon {
          color: $themeColor !important;
        }

        .item-right {
          margin-top: -13px;
          width: 74px;
          height: 140px;
          background-size: 74px 140px;
          background: url('~@/assets/images/bg_todo_item_right_hover.png') no-repeat;
        }
      }

      .item-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 74px);
        background: url('~@/assets/images/bg_todo_item_left.png') left top no-repeat, #d5ebe5;
        background-size: 100% 140px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        padding: 10px 20px;

        .item-title {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #014434;
          line-height: 24px;
          margin-bottom: 2px;
        }

        .item-des {
          font-size: 36px;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: bold;
          color: #014434;
          line-height: 48px;
        }
      }

      .item-right {
        margin-top: -13px;
        width: 74px;
        height: 140px;
        background: url('~@/assets/images/bg_todo_item_right.png') no-repeat;
        background-size: 100%;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }

      .item-corner {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #014434;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 20px;
        box-shadow: 0px 4px 10px 0px rgba(1, 68, 52, 0.2);

        .arrow-icon {
          color: #ffffff;
          font-size: 20px;
        }
      }
    }

    .handle-item {
      position: relative;
      width: 100%;
      height: 53px;
      border-radius: 6px;
      background: rgba(2, 137, 104, 0.9);
      border: 1px solid #03ac82;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      cursor: pointer;

      .filters {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        background: rgba(2, 137, 104, 0.9);

        // filter: blur(10px);
      }

      &:hover {
        background: rgba(2, 137, 104, 0.9);
        box-shadow: 0px 4px 10px 0px rgba(1, 68, 52, 0.2);
      }

      .handle-left {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #eafaf6;
        line-height: 24px;

        .des-icon {
          cursor: pointer;
        }
      }

      .handle-right {
        font-size: 20px;
        font-family: D-DIN-Bold, D-DIN;
        font-weight: bold;
        color: #ffffff;
        line-height: 56px;
      }
    }

    .handle-item + .handle-item {
      margin-top: 9px;
    }
  }
}
</style>
